<div class="ram-settings-machine-item">

  <che-list-item flex>

    <div flex="100"
         layout="row"
         layout-align="start stretch"
         class="che-list-item-row">

      <!-- Icon -->
      <div layout="column" layout-align="center start">
        <div layout="column" layout-align="center center"
             class="ram-settings-machine-item-icon">
          <div class="chefont cheico-stacks"></div>
        </div>
      </div>

      <div flex layout="row" flex="auto">
        <!-- Name -->
        <div flex="40" layout="column" layout-align="center start">
          <span class="che-list-item-name ram-settings-machine-item-item-name">{{ramSettingsMachineItemController.machineName}}</span>
        </div>

        <!-- Description -->
        <div flex layout="column" layout-align="center start">
          <span class="che-list-item-secondary ram-settings-machine-item-secondary-color">{{ramSettingsMachineItemController.machineImage}}</span>
        </div>
      </div>

      <!-- RAM limit -->
      <div flex="25" layout="column" layout-align="center start">
        <ng-form name="ramAmountForm">
          <che-number-spinner che-form="ramAmountForm"
                              che-name="memory"
                              che-step="0.5"
                              che-tofixed="1"
                              che-minvalue="0.5"
                              che-maxvalue="100"
                              che-unit="GB"
                              id="machine-{{ramSettingsMachineItemController.machineName}}-ram"
                              ng-model="ramSettingsMachineItemController.machineMemoryLimit"
                              ng-change="ramSettingsMachineItemController.onRamChanged(value)"
                              required>
          </che-number-spinner>
        </ng-form>
      </div>
      <div style="width: 10px"></div>
    </div>


  </che-list-item>

</div>
